<template>
    <div class="wrapper">
        <div class="title">常用语：</div>
        <div class="tag-wrapper">
            <div @click="selectTag(text, index)" :class="textIndex == index ? 'textBox selected' : 'textBox'"
                v-for="(text, index) in userfulFeedback" :key="text.index">
                {{ text }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userfulFeedback: [
                    '培训内容符合企业的需要，对企业有所帮助',
                    '培训内容清晰明确，易于理解',
                    '授课形势好，且培训时间安排合理',
                    '通过学习，我可以基本掌握培训内容'
                ],
                textIndex: null, //当前选中索引
            }
        },
        methods: {
			selectTag(text, index) {
				this.textIndex = index;
				this.changeSelect();
			},
			changeSelect() {
				let data = {
					text: this.userfulFeedback[this.textIndex]
				}
				this.$emit('changeSelect', data);
			}
        }
    }
</script>

<style scoped>
    .wrapper{
        width: 100%;
        display: flex;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .wrapper .title{
        width: 60px;
    }

    .tag-wrapper{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .textBox {
        padding: 6px 12px;
        border-radius: 4px;
        color: #bbbbbb;
        background-color: #fff;
        margin-bottom: 9px;
        border: 1px solid #eee;
    }

    .textBox:hover{
        cursor: pointer;
    }

    .selected {
        background-color: #f4fbff;
        color: #045db9;
    }
</style>